<template>
  <div>
    <el-card class="box-card" v-if="entity">
      <div class="row-start" style="margin-bottom: 20px" >
        <div class="order-number">报备单号：{{entity.orderNo || ''}}</div>
        <el-tag :type="stateArr[entity.lookHousingStatus - 0]" effect="dark">{{entity.lookHousingStatusString}}</el-tag>
      </div>
      <div class="row-between order-info">
        <div class="order-info-item">
          <div class="row-start order-item-view">
            <div class="lable-view">带看经纪人&联系方式：</div>
            <div class="text-ellipsis">{{entity.takeaLookName}}/{{entity.takeaLookPhone}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">企业名称：</div>
            <div class="text-ellipsis">{{entity.enterpriseName}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">企业联系人&联系方式：</div>
            <div class="text-ellipsis">{{entity.customerName}}/{{entity.customerMobile}}</div>
          </div>
        </div>
        <div class="order-info-item">
          <div class="row-start order-item-view">
            <div class="lable-view">创建时间：</div>
            <div class="text-ellipsis">{{entity.createTime}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">看房时间：</div>
            <div class="text-ellipsis">{{entity.beginTime}} - {{entity.endTime}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">备注：</div>
            <div class="text-ellipsis">{{entity.notes}}</div>
          </div>
        </div>
        <div class="order-info-item">
          <div class="row-start order-item-view">
            <div class="lable-view">园区名称：</div>
            <div class="text-ellipsis">{{entity.gardenName}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">房源名称：</div>
            <div class="text-ellipsis">{{entity.housingName}}</div>
          </div>
          <div class="row-start order-item-view">
            <div class="lable-view">房源联系人&联系方式：</div>
            <div class="text-ellipsis">{{entity.husingAgentName}}/{{entity.husingAgentPhone}}</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box-card" v-if="entity">
      <div slot="header" class="clearfix">
        <span>流程进度</span>
      </div>
      <el-steps :active="entity.lookHousingOrderLog.length" style="margin: 0 60px">
        <el-step :title="item.step" v-for="(item,index) in entity.lookHousingOrderLog" :key="index">
          <div slot="description" >
            <div>{{item.name || ''}}</div>
            <div>{{item.createTime || ''}}</div>
          </div>
        </el-step>
      </el-steps>
    </el-card>

    <el-card class="box-card" v-if="entity">
      <div slot="header" class="clearfix">
        <span>图片凭证</span>
      </div>
      <div class="row-start image-list">
        <div class="image-view" v-for="(item, index) in entity.lookHousingImage" :key="index">
          <el-image class="image-item" :src="item.image" fit="cover" :preview-src-list="entity.lookHousingImage.map(item => item.image)"></el-image>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
  export default {
    name: 'reportDetail',
    data() {
      return {
        stateArr: ['success', 'info', 'warning', 'danger', 'info', 'info'],
        detailId: null,
        entity: null
      }
    },
    beforeMount() {
      if (this.$route.query.id) {
        this.detailId = this.$route.query.id
        this.getDetailRequest()
      }
    },
    methods: {
      async getDetailRequest() {
        const res = await this.$ajax.get(`/workorder/lookHousingOrder/backstage/info?id=${this.detailId}`)
        this.entity = res.data
      }
    }
  }
</script>

<style scoped lang="scss">
  .title-div {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .image-list {
    width: 100%;
    flex-wrap: wrap;
    .image-view {
      width: 240px;
      height: 240px;
      padding: 10px;
      .image-item{
        width: 100%;
        height: 100%;
      }
    }
  }

  .box-card + .box-card {
    margin-top: 20px;
  }

  .order-number {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
  }

  .order-info {
    width: 100%;
    .order-info-item {
      width: calc(100% / 3);
      .order-item-view {
        width: 100%;
        .lable-view {
          font-size: 14px;
          font-weight: bold;
        }
        .text-ellipsis {
          flex: 1;
          color: #999999;
        }
      }
      .order-item-view + .order-item-view {
        margin-top: 10px;
      }
    }
  }
</style>
